<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
</head>

<body>
    <div style="padding: 0 20px;">
        <div class="panel panel-info">
            <div class="panel-heading">添加你最喜爱的图书</div>
            <div class="panel-body form-inline">
                <!-- 表单输入域 -->

                <!-- 图书名称 -->
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input type="text" class="form-control" id="bookname" placeholder="请输入书名" />
                </div>

                <!-- 图书作者 -->
                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input type="text" class="form-control" id="author" placeholder="请输入作者" />
                </div>

                <!-- 图书出版社 -->
                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input type="text" class="form-control" id="publisher" placeholder="请输入出版社" />
                </div>

                <!-- 提交按钮 -->
                <button id="addbook" class="btn btn-primary">提交</button>
            </div>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script src="./lib/jquery.js"></script>
    <script>
        $(function() {
            //先从服务器获取数据 并封装成函数 以便后面刷新使用
            function loadBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                    //服务器返回的图书列表数据
                    var bookList = res.data;
                    //将数据拼接到页面上
                    var bookTags = [];
                    //遍历数据
                    $.each(bookList, function(index, ele) {
                        // console.log(index, ele);
                        console.log(ele.id);
                        bookTags.push(`
        <tr>
          <td>${ele.id}</td>
          <td>${ele.bookname}</td>
          <td>${ele.author}</td>
          <td>${ele.publisher}</td>
          <td class='del' data-id='${ele.id}'>删除</td>
        <s/tr>
        `);
                    });
                    $('tbody').html(bookTags.join(''));
                });
            }
            loadBookList();
            //提交按钮功能实现
            $('#addbook').click(function() {
                //添加图书
                // 1.获取表单数据
                var bookname = $('#bookname').val();
                var author = $('#author').val();
                var publisher = $('#publisher').val();
                console.log(bookname, author, publisher);

                // 表单验证;
                if (!bookname) {
                    alert('图书名称不能为空');
                    return;
                }
                if (!author) {
                    alert('图书作者不能为空');
                    return;
                }
                if (!publisher) {
                    alert('图书出版社不能为空');
                    return;
                }
                //添加图书功能
                $.post(
                    'http://www.liulongbin.top:3006/api/addbook', {
                        bookname: bookname,
                        author: author,
                        publisher: publisher,
                    },
                    function(res) {
                        if (res.status === 201) {
                            // 如果添加成功 ， 刷新列表
                            loadBookList();
                            // 清空表单
                            $('#bookname').val('');
                            $('#author').val('');
                            $('#publisher').val('');
                        }
                    }
                );
            });
            //添加点击删除事件 因为动态添加  所以用事件委托on注册点击事件
            $('tbody').on('click', '.del', function() {
                //获取当前自定义属性的'data-id'={ele.id}
                var id = $(this).attr('data-id');
                //var id =$(this).data('id')
                $.get(
                    'http://www.liulongbin.top:3006/api/delbook', {
                        id: id,
                    },
                    function(res) {
                        // 删除成功，刷新列表
                        if (res.status === 200) {
                            //刷新列表
                            loadBookList();
                        }
                    }
                );
            });
        });
    </script>
</body>

</html>